<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="colorui/main.css">
    <link rel="stylesheet" type="text/css" href="colorui/icon.css">
    <script type="text/javascript" src="js/webview.js"></script>
    <script type="text/javascript" src="rtc/adapter-latest.js"></script>
    <style>
      body {
        background-color: #8799a3
      }

      .cu-avatar.xl {
        width: 93px;
        height: 93px
      }

      .trtc-bar {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
      }

      .trtc-bar .roundicon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        line-height: 60px;
        font-size: 28px;
        position: relative;
        margin: 0 auto
      }

      .trtc-bar .roundicon.rotate {
        -webkit-transform: rotate(125deg);
        transform: rotate(125deg)
      }

      .trtc-bar .roundicon.close::before {
        content: " ";
        width: 2px;
        height: 32px;
        margin-top: -16px;
        background-color: #fff;
        left: 50%;
        top: 50%;
        position: absolute;
        z-index: 100;
        -webkit-transform: rotate(139deg);
        transform: rotate(139deg)
      }

      .trtc-bar .roundicon[class*="line"]::after {
        content: " ";
        display: block;
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid currentColor;
        -webkit-transform: scale(.5);
        transform: scale(.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        box-sizing: border-box;
        border-radius: 50%;
        z-index: 1;
        pointer-events: none
      }

      body {
        background-color: #8799a3
      }

      .grid.col-2>div {
        width: 50%;
      }

      .grid.col-3>div {
        width: 33.33%;
      }

      .padding {
        padding: 15px;
        box-sizing: border-box;
      }

      .margin-top {
        margin-top: 15px;
      }

      .padding-top-sm {
        padding-top: 10px;
      }

      .text-muted {
        color: #e0e0e0;
        font-size: 14px;
      }

      .hidden,
      .noaf::after,
      .nobf::before {
        display: none !important;
      }

      .bg-limegreen {
        background-color: #05c160;
        color: #fff;
      }

      /* line-white */
      .trtc-bar .roundicon.close::before {
        content: " ";
        width: 2px;
        height: 32px;
        margin-top: -16px;
        background-color: #fff;
        left: 50%;
        top: 50%;
        position: absolute;
        z-index: 100;
        -webkit-transform: rotate(139deg);
        transform: rotate(139deg);
      }
	  /* .cu-bar{
	  		  top: 60px;
	  		  height: 60px;
	  }
	  @supports (top: env(safe-area-inset-top)) {
	      .cu-bar{
	          top: 90px;
	  			  height: 90px;
	      }
	  } */
    </style>
  </head>
  <body>
    <div>
      <div>
        <div class="cu-custom padding-ios" >
          <div class="cu-bar fixed bg-grey" >
            <div class="action">
              <span class="cuIcon-back"></span>
            </div>
            <div class="content" style="top: 0px;"></div>
          </div>
        </div>
      </div>
      <div id="remote_stream" class="hidden">
        <audio id="my_video" autoplay></audio>
      </div>
      <div class="padding-xl">
        <div class="flex justify-center">
          <div class="cu-avatar xl radius" id="avatar">
          </div>
        </div>
        <div class="padding text-white text-center">
          <span class="text-xs" id="name"></span>
          <div class="text-lg margin-top text-muted" id="tips">对方邀请您进行语音通话</div>
          <div class="text-lg margin-top calltime hidden text-white" id="calltime">00:00:00</div>
        </div>
      </div>
      <div class="foot trtc-bar">
        <div class="grid col-2 btnGroup">
          <div class="padding text-center hidden voiceBtn" id="voiceBtn" onclick="voiceBtn()">
            <div class="roundicon bg-white voiceBtnIn">
              <span class="cuIcon-voicefill"></span>
            </div>
            <div class="padding-top-sm">
              <span class="text-muted voiceBtnText" id="voiceBtnText">麦克风</span>
            </div>
          </div>
          <div class="padding text-center" onclick="cancelBtnd()">
            <div class="roundicon bg-red rotate">
              <span class="cuIcon-dianhua"></span>
            </div>
            <div class="padding-top-sm">
              <span class="text-muted"></span>
            </div>
          </div>
          <div class="padding text-center asceptCall" id="asceptCall" onclick="acceptVoice()">
            <div class="roundicon bg-limegreen">
              <span class="cuIcon-dianhua"></span>
            </div>
            <div class="padding-top-sm">
              <!-- <span class="text-muted">接听</span> -->
            </div>
          </div>
          <div class="padding text-center hidden speakBtn" id="speakBtn" onclick="speakBtn()">
            <div class="roundicon bg-white speakBtnIn">
              <span class="cuIcon-notificationfill"></span>
            </div>
            <div class="padding-top-sm">
              <span class="text-muted speakBtnText" id="speakBtnText">听筒</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="config/base.js"></script>
  <script type="text/javascript" src="config/config.js"></script>
  <script type="text/javascript" src="js/jsonly.js"></script>
  <script type="text/javascript" src="js/webView-rtc.js"></script>
  <script>
    var myVideo = document.getElementById('my_video');
    const uniRtc = new webViewRtc({
      ele: myVideo,
      url: baseconfig.iceServer,
      username: baseconfig.username,
      credential: baseconfig.credential
    })
    uniRtc.init(getQueryVariable('platform'))
    uniRtc.ontrack((event) => {
      const eltips = document.getElementById('tips')
      eltips.style.display = 'none'
      const calltime = document.getElementById('calltime')
      removeAllClass('calltime', 'hidden')
      removeAllClass('voiceBtn', 'hidden')
      removeAllClass('speakBtn', 'hidden')
      addAllClass('asceptCall', 'hidden')
      removeAllClass('btnGroup', 'col-2')
      addAllClass('btnGroup', 'col-3')
	  myVideo.muted=false
      startTime(calltime)
    })
    uniRtc.receiveVoice()
    uniRtc.receiveAppMessage()

    uniRtc.receiveMessage()
    window.onload = function() {
      const speakBtnText = document.getElementById('speakBtnText')
      if (getQueryVariable('platform') === 'h5') {
        postMsg = window.parent.postMessage
        speakBtnText.innerHTML = '听筒'
      }
      if (getQueryVariable('platform') === 'app') {
        speakBtnText.innerHTML = '扬声器'
      }
      updateInfo()
      if(getQueryVariable('complete')) {
        setTimeout(() => {
           acceptVoice()
        }, 500)
      }
    }
  </script>
</html>
